<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!-- 使用最新的IE兼容模式渲染此网页 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<!-- 在双核浏览器下，默认使用webkit内核，由360浏览器提出 -->
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--<link rel="shortcut icon" href=""/>-->
		<!-- 强大的CSS Reset库 -->
		<link href="http://cdn.bootcss.com/normalize/5.0.0/normalize.css" rel="stylesheet">
		<link rel="stylesheet" href="css/core.css" />
		<!-- 让IE9以下的浏览器支持HTML5标签 -->
		<!--[if lt IE 9]>
        	<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
        	<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
	</head>
	
	<body background="#FAFAFA">
		<header class="header">
				<div class="top" id="top">
					<div class="content">		
						<div class="left">
							<div class="all-menu">
								<a href="#"></a>
								<div class="sub-menu">
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
											
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Pricing Table</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Our Team</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Not Found</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Search Results</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Skills</a></li>
										</ul>
									</div>
									<div class="list">
										<h3>Our Services</h3>
										<ul class="sub-nav">
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">About Us</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Services</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">Vacancies</a></li>
											<li><i class="icon1"></i><i class="icon2"></i><a href="#">FAQ</a></li>
											
										</ul>
									</div>
								</div>
							</div>
							<div class="logo">
								<a href="#">
									<span class="icon"></span>
									<span class="globals"></span>
								</a>
							</div>
						</div>
						<div class="nav">
							<ul>
								<li><a href="index.html">Home</a></li>
								<li class="pages">
									<a href="pages.html">Pages</a>
									<ul class="sub-nav">
										<li><a href="about-us.html">About Us</a></li>
										<li><a href="vancancies-details.html">Vacancies Details</a></li>
										<li><a href="blog-details.html">Blog Details</a></li>
									</ul>
								</li>
								<li  class="pages">
									<a href="portfolio.html"  class="current">Portfolio</a>
									<ul class="sub-nav">
										<li><a href="masonry-four.html">Masonry Four</a></li>
										<li><a href="masonry-three.html">Masonry Three</a></li>
										<li><a href="grid_three.html">Grid Three</a></li>
										<li><a href="grid-masonry-three.html">Grid Masonry Three</a></li>
										<li><a href="landscape.html">Landscape</a></li>
										<li><a href="gallery.html">Gallery</a></li>
									</ul>
								</li>
								<li><a href="vacancies.html">Vacancies</a>
								</li>
								<li><a href="blog.html">Blog</a></li>
								<li><a href="cantact.html">Contacts</a></li>
							</ul>
						</div>
						<div class="right">
							<span></span>
							<ul class="sub-nav">
								<li><a href="#">About Us</a></li>
								<li><a href="#">Services</a></li>
								<li><a href="#">Vacancies</a></li>
								<li><a href="#">FAQ</a></li>
								<li><a href="#">Pricing Table</a></li>
								<li><a href="#">Our Team</a></li>	
							</ul>
						</div>
					</div>
					
				</div>
		<!-------移动端导航------->
				<div class="menu-list" id="menu-list">
					<div class="item">
						<ul class="item-menu">
							<li class="home" id="home"></li>
							<li class="more"></li>
							<li class="logo"></li>
						</ul>
						<ul id="sub-menu">
							<li><a href="index.html">Home</a></li>
							<li><a href="pages.html">pages</a></li>
							<li><a href="portfolio.html">Portfolio</a></li>
							<li><a href="vacancies.html">Vacancies</a></li>	
							<li><a href="blog.html">Blog</a></li>
							<li><a href="cantact.html">Contacts</a></li>
						</ul>
					</div>
				</div>
				
				<div class="bottom" id="bottom">
					<div class="inner">
						<div class="left">
							<a href="#">Home</a>
							<span>/</span>
							<a href="#">pages</a>
							<span>/</span>
							<a href="#" class="current">Dropdown Menu Style</a>
						</div>
						<div class="right">
							<div class="message">
								<a href="#">+</a>
								<div class="send">
									<span><i></i>Send a Message</span>
								</div>
							</div>
						</div>
					</div>
				</div>
		</header>
		
		<section class="portfolio-banner-wrapper clearfix">
			<div class="banner-top">
				<span>Perspective APP Screens</span><br /><br />
				<div class="top-text"><a href="">portfolio</a>&nbsp;/ &nbsp;<a href="">User Interface</a></div>
				<div class="top-share">
					<img src="img/portfolio-share1.jpg"/>&nbsp;&nbsp;<img src="img/portfolio-share2.jpg"/>
				</div>
			</div>
			
			<div class="banner-main clearfix">
				<div class="main-picture"><img src="img/portfolio-q8.jpg" style="width: 1250px;max-height:500px;"/></div>
				<div class="main-picture image"><img src="img/portfolio-q7.jpg" style="width: 1250px;max-height:500px;"/></div>
				<div class="main-picture image"><img src="img/portfolio-q6.jpg" style="width: 1250px;max-height:500px;"/></div>
				<div class="main-picture image"><img src="img/portfolio-q5.jpg" style="width: 1250px;max-height:500px;"/></div>
				<div class="main-picture image"><img src="img/portfolio-e1.jpg" style="width: 1250px;max-height:500px;"/></div>
				<div class="main-picture image"><img src="img/portfolio-e2.jpg" style="width: 1250px;max-height:500px;"/></div>
				<div class="main-picture image"><img src="img/portfolio-e3.jpg" style="width: 1250px;max-height:500px;"/></div>
				<div class="main-picture image"><img src="img/portfolio-e4.jpg" style="width: 1250px;max-height:500px;"/></div>
			</div>
			
			<div class="banner-img clearfix">
				<ul>
					<li class="img-opacity opacity-hide"><img src="img/portfolio-q8.jpg" width="156px" height="110px"/></li>
					<li class="img-opacity"><img src="img/portfolio-q7.jpg" width="156px" height="110px"/></li>
					<li class="img-opacity"><img src="img/portfolio-q6.jpg" width="156px" height="110px"/></li>
					<li class="img-opacity"><img src="img/portfolio-q5.jpg" width="156px" height="110px"/></li>
					<li class="img-opacity"><img src="img/portfolio-e1.jpg" width="156px" height="110px"/></li>
					<li class="img-opacity"><img src="img/portfolio-e2.jpg" width="156px" height="110px"/></li>
					<li class="img-opacity"><img src="img/portfolio-e3.jpg" width="156px" height="110px"/></li>
					<li class="img-opacity"><img src="img/portfolio-e4.jpg" width="156px" height="110px"/></li>
				</ul>
			</div>
			
			<div class="banner-text">
				<div class="banner-text-left">
					<span>Claritas etiam processus dynamicus</span><br /><br />
					<p>
						There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.
						May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep you human,enough hope to make you happy? Always put yourself in others’shoes.If you feel that it hurts you,it probably hurts the other person, too.
						who have touched their lives.Love begins with a smile,grows with a kiss and ends with a tear.The brightest future will always be based on a forgotten past, you can’t go on well in lifeuntil you let go of your past failures and heartaches.
					</p><br /><br />
					<p>
						　The happiest of people don’t necessarily have the best of everything;they just make the most of everything that comes along their way.Happiness lies for those who cry,those who hurt, those who have searched,and those who have tried,for only they can appreciate the importance of people.who have touched their lives.Love begins with a smile,grows with a kiss and ends with a tear.The brightest future will always be based on a forgotten past, you can’t go on well in lifeuntil you let go of your past failures and heartaches.
					</p>
					
					<div class="text-left-download">
						DownLoad
					</div>
					<div class="text-left-now">
						Buy This Now
					</div>
				</div>
				
				<div class="banner-text-right">
					<span>Details</span><br /><br />
					<div class="right-item ">
						<img src="img/portfolio-q1.jpg" class="right-item-img"/>
						<p class="item-p">Date <span>07 Mary,2015</span></p>
					</div>
					<div class="right-item">
						<img src="img/portfolio-q2.jpg" class="right-item-img"/>
						<p class="item-p">Category <span>Icons</span></p>
					</div>
					<div class="right-item">
						<img src="img/portfolio-q3.jpg" class="right-item-img"/>
						<p class="item-p">Client <span>company INC</span></p>
					</div>
					<div class="right-item">
						<img src="img/portfolio-q4.jpg" class="right-item-img"/>
						<p class="item-p">Views <span>48524</span></p>
					</div>
					<div class="right-item">
						<img src="img/grid-masonry-box2.png" class="right-item-img"/>
						<p class="item-p">Likes <span>755</span></p>
					</div>
				</div>
			</div>	
		</section>
		
		<section class="portfolio-content clearfix">
			<div class="content-top">
				<span>Related Listing</span><br /><br />
				<p>Lorem ipsum dolor sit amet,consectetuer bfjdh dsjfh,sed diam nonummy nibh euismond ut laroreed dolore magna aliquam</p>
			</div>
			
			<div class="content-main">
				<div class="main-box-bottom">
					<div class="box-bottom-img">
						<img src="img/portfolio-w1.jpg" width="396px" height="250px"/>
						<div class="box-bottom-img-layer">
							<div class="layer-share"><img src="img/grid-masonry-three-share.jpg"/></div>
						</div>
					</div>	
					<div class="box-bottom-span">QARO-Flat PSD Template</div>
					<div class="box-bottom-p">Lorem ipsum dolor sit amet,concectetuer adipi-scing elit,sed diam nonummy.</div>
					<div class="box-bottom-text">
						<div class="box-bottom-pic"></div>
						<span class="box-bottom-span">Mock-Ups</span>
					</div>
					<div class="box-bottom-cycle">
						<img src="img/grid-masonry-three2.png"/>
					</div>
			    </div>
			    <div class="main-box-bottom">
					<div class="box-bottom-img">
						<img src="img/portfolio-w2.jpg" width="396px" height="250px"/>
						<div class="box-bottom-img-layer">
							<div class="layer-share"><img src="img/grid-masonry-three-share.jpg"/></div>
						</div>
					</div>	
					<div class="box-bottom-span">QARO-Flat PSD Template</div>
					<div class="box-bottom-p">Lorem ipsum dolor sit amet,concectetuer adipi-scing elit,sed diam nonummy.</div>
					<div class="box-bottom-text">
						<div class="box-bottom-pic"></div>
						<span class="box-bottom-span">Mock-Ups</span>
					</div>
					<div class="box-bottom-cycle">
						<img src="img/grid-masonry-three2.png"/>
					</div>
			    </div>
				<div class="main-box-bottom">
					<div class="box-bottom-img">
						<img src="img/portfolio-w3.jpg" width="396px" height="250px"/>
						<div class="box-bottom-img-layer">
							<div class="layer-share"><img src="img/grid-masonry-three-share.jpg"/></div>
						</div>
					</div>	
					<div class="box-bottom-span">QARO-Flat PSD Template</div>
					<div class="box-bottom-p">Lorem ipsum dolor sit amet,concectetuer adipi-scing elit,sed diam nonummy.</div>
					<div class="box-bottom-text">
						<div class="box-bottom-pic"></div>
						<span class="box-bottom-span">Mock-Ups</span>
					</div>
					<div class="box-bottom-cycle">
						<img src="img/grid-masonry-three2.png"/>
					</div>
			    </div>
			</div>
		</section>
		
		<section class="portfolio-back-wrapper">
			<div class="portfolio-back">
				Back to portfolio
			</div>
		</section>
		
		
		<footer class="common-footer-wrapper">
			<div class="common-footer">
				<div class="common-footer-center">
					<div class="center-text">
						<span>Follow Us in Social Networks</span>
						<p>Lorem ipsum dolor sit amet,consectetuer bfjdh dsjfh,sed diam nonummy nibh euismond ut laroreed dolore magna aliquam</p>
					</div>
					
					<ul class="center-menu">
						<li><img src="img/footer1.png"/></li>
						<li><img src="img/footer9.png"/></li>
						<li><img src="img/footer5.png"/></li>
						<li><img src="img/footer2.png"/></li>
						<li><img src="img/footer8.png"/></li>
						<li><img src="img/footer4.png"/></li>
						<li><img src="img/footer3.png"/></li>
						<li><img src="img/footer6.png"/></li>
					</ul>
				</div>
			</div>
			
			<div class="common-footer-bg">
				<div class="bg-text">
					<div class="text-left">
						<span>Twitter Widget</span>
						<div class="left-inner-top">
							<img src="img/footer7.png"/>
							<div class="inner-top-write">
								Mirum est <a href="">@global</a> notare quam littera gothica.qua, nunc putamus parum,antepodse <a href="">http://t.co/6621 J8UFV</a>
								<p>6 MINUTES AGO</p>
							</div>
						</div>
						
						<div class="left-inner-bottom">
							<img src="img/footer7.png"/>
							<div class="inner-bottom-write">
								<a href="">@themefire</a> notare quam littera gothica.qua, nunc putamus parum,antepodse <a href="">http://t.co/6621 J8UFV</a>
								<p>18 JUN 2015</p>
							</div>
						</div>
					</div>
					
					<div class="text-center">
						<span>Dribble Widget</span><br /><br />
						<div class="center-span">claritas est ynew trdhnm euy yebviumgd tyreuin oiywdw gyns ghbnh wikjsdhd</div>
						<ul class="center-img-item">
							<li><img src="img/footer11.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer13.jpg" width="139px" height="100px"/></li>
							<li class="item-hide"><img src="img/footer12.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer15.jpg" width="139px" height="100px"/></li>
							<li><img src="img/footer14.jpg" width="139px" height="100px"/></li>
							<li class="item-hide"><img src="img/footer16.jpg" width="139px" height="100px"/></li>
						</ul>
					</div>
					
					<div class="text-right">
						<span>Email Newsletters</span><br /><br />
						<div class="right-write">
							Sign Up our Newsletter to get latest updates and office subscribe to receive news in your inbox
						</div>
						<div class="right-email">
							Email Address
						</div>
						<div class="right-now">
							<a href="">Subscribe Now</a>
						</div>
					</div>
				</div>
			</div>
			
			<div class="common-footer-copyright">
				<div class="copyright-inner">
					<img src="img/footer-copyright.png" class="copyright-img"/>
					<div class="copyright-text">@2015 Design Studio <span>Globals</span> /Designed by <span>ThemeFire</span> / only for <span>Envato Market</span></div>
				</div>
			</div>
		</footer>
		
		<script src="vendor/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/core.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//portfolio界面的图片轮播
			$(function(){
				var i = 0;
				function picture(){
					$('.main-picture').eq(i).hide("slow");
					$('.img-opacity').eq(i).fadeTo("slow",0.4);
					i++;
					if(i == 8){
						i = 0;
					}
					$('.main-picture').eq(i).slideDown("slow");
					$('.img-opacity').eq(i).fadeTo("slow",1);	
				}
				
				setInterval(picture,5000);
			})
		</script>
	</body>
</html>
